<!-- 登录页 -->
<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<text class="reg-text" @click="regAccount" v-if="isLogin">注册</text>
			<text class="reg-text" @click="loginAccount" v-if="!isLogin">登录</text>
		</view>
		<!-- /头部 -->
		<!-- 主体 -->
		<view class="main">
			<view class="logo-img">
				<figure>
					<image src="../../static/imgs/coffee-logo.jpeg" mode="widthFix"></image>
				</figure>
			</view>
			<view class="input" v-if="!isLogin">
				<view class="con">
					<u-icon name="phone-fill"></u-icon>
					<text>用户名</text>
					<input type="text" class="phone-input" maxlength="11" placeholder="请输入用户名" v-model="userName">
				</view>
			</view>
			<view class="input">
				<view class="con">
					<u-icon name="phone-fill"></u-icon>
					<text>手机号</text>
					<input type="text" class="phone-input" maxlength="11" placeholder="请输入手机号" v-model="phone">
				</view>
			</view>
			<view class="input">
				<view class="con">
					<u-icon name="lock-fill"></u-icon>
					<text>密码</text>
					<input type="password" class="phone-input" placeholder="请输入密码" v-model="password">
				</view>
			</view>
			<view class="input" v-if="!isLogin">
				<view class="con">
					<u-icon name="lock-fill"></u-icon>
					<text>确认密码</text>
					<input type="password" class="phone-input" placeholder="请第二次输入密码" v-model="confirmPassword">
				</view>
			</view>
			<view class="login-btn" @click="loginAccount" v-if="isLogin">
				<text>登录</text>
			</view>
			<view class="login-btn" @click="regAccount" v-if="!isLogin">
				<text>注册</text>
			</view>
		</view>
		<!-- /主体 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 是否为登录状态
				isLogin: true,
				// 电话号
				phone: '',
				// 密码
				password: '',
				// 确认密码
				confirmPassword: '',
				// 用户名
				userName: '',
			}
		},
		methods: {
			// 登录账号
			loginAccount() {
				if (this.isLogin) {
					// 如果是登录状态则进行登录操作
					if (this.phone === '') {
						uni.showToast({
							title: "请输入手机号",
							icon: 'none'
						})
						return
					} else if (this.phone !== '') {
						// 手机号正则验证
						let reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
						if (reg.test(this.phone)) {
							// 验证成功登录
							// 弹出遮罩层
							uni.showLoading({
								title: "正在登录，请稍后",
								mask: true
							});
							this.$ajax.login.post({
								phone: this.phone,
								password: this.password
							}).then(result => {
								uni.showToast({
									title: "登录成功",
									icon: "success"
								});
								// 本地缓存存入账号
								uni.setStorageSync("account", this.phone);
								// 本地缓存存入密码
								uni.setStorageSync("password", this.password);
								// 本地缓存存入token
								uni.setStorageSync("token", result.data);
								// 隐藏加载框
								uni.hideLoading();
								// 2s后返回主页
								setTimeout(() => {
									uni.reLaunch({
										url: "/pages/index/index"
									})
								}, 2000)
							}).catch((error) => {
								uni.showToast({
									title: "登录失败",
									icon: 'error'
								})
								// 隐藏加载框
								uni.hideLoading();
							})
						} else {
							uni.showToast({
								title: "请重新输入手机号，格式不正确",
								icon: 'none'
							})
							return
						}
					}
				} else {
					// 如果不是登录状态则转换成登录
					this.isLogin = true;
				}
			},

			// 注册账号
			regAccount() {
				if (!this.isLogin) {
					// 如果不是登录状态则进行注册操作
					if (this.phone === '') {
						uni.showToast({
							title: "请输入手机号",
							icon: 'none'
						})
						return
					} else if (this.userName === '') {
						uni.showToast({
							title: "请输入用户名",
							icon: 'none'
						})
						return
					} else if (this.phone !== '') {
						// 手机号正则验证
						let reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
						if (reg.test(this.phone)) {
							// 验证手机号成功，验证两次密码是否一致
							if (this.password === this.confirmPassword) {
								// 弹出遮罩层
								uni.showLoading({
									title: "正在注册，请稍后",
									mask: true
								});
								// 注册
								this.$ajax.registry.post({
									username: this.userName,
									phone: this.phone,
									password: this.password,
								}).then(result => {
									uni.showToast({
										title: "注册成功",
										icon: "success"
									});
									// 本地缓存存入账号
									uni.setStorageSync("account", this.phone);
									// 本地缓存存入密码
									uni.setStorageSync("password", this.password);
									// 本地缓存存入token
									// uni.setStorageSync("token", result.data);
									// 隐藏加载框
									uni.hideLoading();
									// 2s后返回主页
									setTimeout(() => {
										// uni.reLaunch({
										// 	url: "/pages/index/index"
										// })
										this.isLogin = true;
									}, 2000)
								}).catch((error) => {
									// 隐藏加载框
									uni.hideLoading();
									uni.showToast({
										title: "注册失败",
										icon: 'error'
									})
								})
							} else {
								uni.showToast({
									title: "两次密码不一致，请重新输入",
									icon: 'none'
								});
								return
							}
						} else {
							uni.showToast({
								title: "请重新输入手机号，格式不正确",
								icon: 'none'
							});
							return
						}
					}
				} else {
					// 如果是登录状态则转换成注册
					this.isLogin = false;
				}
			}
		},
		onLoad() {
			// 如果本地缓存有这些就会填入输入框
			this.phone = uni.getStorageSync('account') || '';
			this.password = uni.getStorageSync('password') || '';
			clearInterval();
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		padding: 20rpx 20rpx 20rpx 0;
		overflow: hidden;

		.reg-text {
			float: right;
			color: #1989fa;
		}
	}

	.main {

		.logo-img {
			margin-top: 20rpx;
			text-align: center;


		}

		.input {
			margin: 0 0 10rpx 0;
			padding: 10rpx 40rpx;

			.con {
				border-bottom: 1rpx solid #aaa;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
			}

			text {
				flex: 1;
			}

			.phone-input {
				flex: 3;
			}
		}

		.login-btn {
			width: 80%;
			height: 80rpx;
			margin: 0rpx auto;
			border-radius: 50rpx;
			background-color: #1989fa;
			text-align: center;
			cursor: pointer;

			text {
				line-height: 80rpx;
				color: #fff;
			}
		}
	}
</style>
